import { Button, Modal, Popover } from 'antd';
import React, {useEffect} from 'react';
import { useBoolean } from '@umijs/hooks';
import Zmage from 'react-zmage'
import styles from './index.less';
import {API_URL} from '@/config/api';

const LookList = props => {
	const { modalVisible, handleModal, detailData } = props;
		
    // 设置按钮的禁用 和 启用
	const { state: disBtn, setTrue, setFalse } = useBoolean(true);
	
	useEffect(() => {
		if (detailData.actRole == 0 && (detailData.applyPaxStatus != 1 && detailData.applyPaxStatus != 2)) {
			setFalse();
		}else{
			setTrue();
		}
	}, [detailData]);
	// 筛选ID类型
	const filterIDType = (IdType, actRole) => {
		if (IdType === 'NI') {
			return '身份证'
			} else if (IdType === 'PP') {
			return  '护照'
			} else if (IdType === 'PSPT') {
			return  '护照'
			} else {
			return  '其他'
			}
		}
		
	// 筛选审核结果
    const filterChecked = ((item)=>{
		if (item.actRole == 0) {
			if (item.applyPaxStatus == '1') {
			  return '已通过'
			} else if (item.applyPaxStatus == '2') {
			  return '未通过'
			} else {
			  return '待审核'
			}
		}else{
		  if (item.status === '0') {
			return '待审核'
		  } else if (item.status === '1') {
			return '已通过'
		  } else if (item.status === '2') {
			return '未通过'
		  } else {
			return '待审核'
		  }
		}
	  })
	
	const filterStatus = (a, b) => {
		// if (a) {
		// 	return (
		// 		<div>
		// 			<span>
		// 				<Popover content={[
		// 					<div>{a}</div>
		// 				]} trigger="hover">
		// 					<Button>失效</Button>
		// 				</Popover>
		// 			</span>
		// 		</div>
		// 	)
		// } else 
		if (b) {
			return (
				<div>
					<span>
						<Popover content={[
							<div>{b}</div>
						]} trigger="hover">
							<Button>冻结</Button>
						</Popover>
					</span>
				</div>
			)
		} else {
			return null
		}
	}
    return (
      <Modal 
					destroyOnClose={true}
					onCancel={()=>{handleModal(false)}}
					footer={[
						<div style={{textAlign: "right"}} key="footer">
							<Button onClick={() => {handleModal(false)}}>关闭</Button>
						</div>
					]}
					width={640}
					title={[
						<span key="title" style={{fontSize: "18px", color: "#000", fontWeight: "bold"}}>{detailData.actRole === '0'?'申领人':'代领旅客'}信息</span>
					]}
					visible={modalVisible}
        >
					<div className={styles.content}>
						<div className={styles.personImg}>
							<Zmage src={`${API_URL}/api/uploadAndDownload/showImg?imgUrl=${detailData.imgUrl}`} />
							{/* <img src={require("./images/person.png")} alt=""/> */}
						</div>
						<div className={styles.personInfo}>
							<div>
								<span>
									{detailData.actRole === '0'?'申领人':'代领人'}姓名
								</span>
								<span>
									{detailData.paxName} {detailData.actRole !== '0'?(detailData.withBaby === 'Y' ? (<span style={{color:"#999"}}>（含婴儿补偿）</span>) : ''):''}
								</span>
							</div>
							<div>
								<span>
									证件类型
								</span>
								<span>
								{filterIDType(detailData.idType,detailData.actRole)}
								</span>
							</div>
							<div>
								<span>
									证件号码
								</span>
								<span>
									{detailData.idNo}
								</span>
							</div>
							<div>
								<span>
									审核
								</span>
								<span>
									{filterChecked(detailData)}
								</span>
							</div>
							<div>
								<span>
									审核人
								</span>
								{disBtn?<span>
									{detailData.lastAuditor?detailData.lastAuditor:'-'}
								</span>:null}
							</div>
							<div>
								<span>
									审核时间
								</span>
								{disBtn?<span>
									{detailData.lastAuditTime?detailData.lastAuditTime:'-'}
								</span>:null}
							</div>
							{/* 拒绝了，显示拒绝原因，没有拒绝不显示 */}
							<div>
								<span>
									拒绝原因
								</span>
								{disBtn?<span style={{wordBreak:"break-all"}}>
									{detailData.auditRemark?detailData.auditRemark:'-'}
								</span>:null}
							</div>
							{/* 根据单子状态，显示失效，冻结 */}
							{filterStatus(detailData.failureRemark, detailData.freezeRemark)}
						</div>
					</div>
			</Modal>
    )
}

export default LookList;
